<template>
    <div class="app">

        <weiui_navbar class="navbar">
            <weiui_navbar_item type="back"></weiui_navbar_item>
            <weiui_navbar_item type="title">
                <text class="title">常用按钮</text>
            </weiui_navbar_item>
            <weiui_navbar_item type="right" @click="viewCode('component/weiui_button')">
                <!-- <weiui_icon content="code-working" class="iconr"></weiui_icon> -->
            </weiui_navbar_item>
        </weiui_navbar>

        <scroller class="list">

            <text class="list-title">预设样式</text>

            <div class="list-item">
                <div>
                    <weiui_ripple>
                        <weiui_button class="button" :weiui="{text:'默认'}"></weiui_button>
                    </weiui_ripple>
                </div>
                <!-- <weiui_button class="button" :weiui="{text:'默认'}"></weiui_button> -->
                <weiui_button class="button" :weiui="{text:'红色', model:'red'}"></weiui_button>
            </div>
            <div>
                <weiui_icon content="code-working" class="icon"></weiui_icon>
                <!-- <weiui_icon ref="icon" class="icon" content="tb-usefull"></weiui_icon> -->
            </div>
             <div class="list-input-item">
                <text class="cell">按钮宽度</text>
                <input class="input" placeholder="自定义样式实现, 默认全屏"
                       v-model="width"/>
            </div>
            <div style="width:100px;height:100px;backgroundColor:#898989" @click="setIcon" >
                
            </div>
           
        </scroller>


    </div>
</template>

<style scoped>
    .app {
        width: 750px;
        flex: 1;
        background-color: #ffffff;
    }
    .navbar {
        width: 750px;
        height: 100px;
    }
    .title {
        font-size: 28px;
        color: #ffffff
    }
    .iconr {
        width: 100px;
        height: 100px;
        color: #ffffff;
    }
    .icon {
        width: 150px;
        height: 115px;
    }
    .list {
        width: 750px;
        flex: 1;
    }
    .list-title {
        margin-top: 24px;
        margin-bottom: 12px;
        padding-top: 36px;
        padding-right: 24px;
        padding-bottom: 24px;
        padding-left: 24px;
        font-size: 28px;
    }
    .list-item {
        width: 750px;
        flex-direction: row;
    }
    .button {
        font-size: 24px;
        margin-left: 37.5px;
        margin-right: 37.5px;
        margin-bottom: 20px;
        width: 300px;
        height: 80px;
    }
    .list-input-item {
        width: 750px;
        height: 90px;
        flex-direction: row;
        align-items: center;
        border-bottom-color: #e4e4e4;
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }
    .cell {
        padding-left: 50px;
        font-size: 24px;
        color: #666666;
    }
    .switch {
        margin-right: 40px;
    }
    .input {
        padding-right: 50px;
        flex: 1;
        height: 90px;
        text-align: right;
        font-size: 28px;
    }
    .demo-item {
        width: 750px;
        padding-top: 30px;
        padding-bottom: 30px;
        align-items: center;
    }
</style>

<script>
    const weiui = weex.requireModule('weiui');
    export default {
        data() {
            return {
                text: '按钮',
                width: '702px',
                height: '80px',
                loading: false,
                disabled: false,
                backgroundColor: '#FF5000',
                borderColor: '#FF5000',
                borderRadius: '8px',
                fontSize: '28px',
                color: '#FFFFFF'
            };
        },
        mounted() {
            this.$nextTick(() => {
                this.text = '按钮文字';
            });
        },
        created() {
            // this.wrapHeight = Utils.env.getPageHeight();
            this.$navigator.setLeftItem({
                text: '返回', // 展示的文字 (和图片 二选一)    
                textColor: '', // 文字颜色 (默认为白色)
                fontSize: '32', // 字号（默认32px）
                fontWeight: 'normal', // 是否加粗（默认不加粗）
                image: '' // 展示的图片url (和文字 二选一，文字优先级更高)
            }, () => {
                // 点击回调
                this.$router.back({
                    type: 'PUSH'
                })
            })
        },
        computed: {
            demoStyle() {
                const { backgroundColor, borderColor, borderRadius, text, color, loading, disabled, width, height } = this;
                const customStyle = {};
                if (backgroundColor) {
                    customStyle.backgroundColor = backgroundColor;
                }
                if (borderColor) {
                    customStyle.borderColor = borderColor;
                    customStyle.borderWidth = "1px";
                }
                if (borderRadius) {
                    customStyle.borderRadius = borderRadius;
                }
                if (text) {
                    customStyle.text = text;
                }
                if (color) {
                    customStyle.color = color;
                }
                customStyle.loading = loading;
                customStyle.disabled = disabled;
                customStyle.width = width;
                customStyle.height = height;
                return customStyle;
            }
        },
        methods: {
            viewCode(str) {
                openViewCode(str);
            },
            setIcon(){
                weiui.openOtherApp("alipay");
            }
        }
    };
</script>